<%-- 
  -- Body Edit para Debt.
  --
  -- Usa debt.js para muchas funciones.
  --
  -- @author nicolas.gonzalez
--%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-html-el-1.2.8.tld" prefix="html-el"%>
<%@ taglib uri="/WEB-INF/struts-logic-el-1.2.8.tld" prefix="logic-el"%>
<%@ taglib uri="/WEB-INF/security.tld" prefix="security" %>
<%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax" %>

<%@ taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean2"%>

<script src="<html:rewrite page='/protected/script/util.js'/>" type="text/javascript"></script>

<script src="<html:rewrite page='/protected/script/calendar/calendar.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/calendar-setup.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/lang/calendar-es.js'/>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/calendar/style/calendar-blue.css'/>" id="styleFileAnyId"/>

<%-- Para EXT --%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/ext-1.1.1/resources/css/ext-all.css'/>" />

<script src="<html:rewrite page='/protected/script/ext-1.1.1/adapter/ext/ext-base.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ext-1.1.1/ext-all.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/dragdrop.css'/>" id="styleFileDragDrop"/>
<!-- Para AjaxTags -->
<script src="<html:rewrite page='/protected/script/scriptaculous/scriptaculous.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_parser.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_controls.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/ajaxtags/ajaxtags.css'/>" id="AjaxTagsCssId"/>

<%-- Funcionalidad de manejo de Ajax + JSON + Divs flotantes y esas cosas... --%>
<script src="<html:rewrite page='/protected/script/debt.js'/>" type="text/javascript"></script>

<div class="errors">
    <html:errors />
</div>


<script type="text/javascript">
     /* Crea un usuario
      */
    var modifyDebt = function() {
        var balanceValue = $("balanceId").value;        
        var validityFromValue = $("validityFromId").value;        
        var expiryValue = $("expiryId").value;
        var studentIdValue = $("studentId").value;        
        var customerIdValue = $("customerId").value; 
        var courseSelectedObj = $("courseSelectedId");
        var courseSelectedValue = courseSelectedObj.options[courseSelectedObj.selectedIndex].value;
        var selectedBenefitsIdValue = $("selectedBenefitsId").value;        
        var selectedDiscountsIdValue = $("selectedDiscountsId").value;        
        var amountToCreateValue = $("amountToCreateId").value;        
        var debtTypeSelectedObj = $("debtTypeSelectedId");
        var debtTypeSelectedValue = debtTypeSelectedObj.options[debtTypeSelectedObj.selectedIndex].value;
    
        if (Util.valid.isBlank(balanceValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar saldo. ');
            return;
        }
        else {
            if (!Util.valid.isPositiveFloat(balanceValue)) {
                Ext.MessageBox.alert('Error', 'Saldo debe ser un valor valido positivo. ');
                return;
            }
        } 
        if (Util.valid.isBlank(validityFromValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar Vigencia Desde. ');
            return;
        }
        if (Util.valid.isBlank(expiryValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar Vencimiento. ');
            return;
        }
        if (Util.valid.isBlank(studentIdValue)) {
            Ext.MessageBox.alert('Error', 'Debe elegir participante. ');
            return;
        }
        if (Util.valid.isBlank(customerIdValue)) {
            Ext.MessageBox.alert('Error', 'Debe elegir cliente.');
            return;
        }
        if (Util.valid.isBlank(courseSelectedValue)) {
            Ext.MessageBox.alert('Error', 'Debe elegir curso. ');
            return;
        }
        if (!Util.valid.isPositiveInteger(amountToCreateValue)) {
            Ext.MessageBox.alert('Error', 'Cantidad a crear debe ser un entero positivo. ');
            return;
        }
        else {
            // NO puede ser 0
            if (amountToCreateValue == "0") {
                Ext.MessageBox.alert('Error', 'Cantidad a crear debe ser un entero positivo y mayor a cero. ');
                return;
            }
        }
        
        $("balanceModifyId").value = balanceValue;
        $("validityFromModifyId").value = validityFromValue;
        $("expiryModifyId").value = expiryValue;
        $("studentIdModifyId").value = studentIdValue;
        $("customerIdModifyId").value = customerIdValue;
        $("courseSelectedModifyId").value = courseSelectedValue;
        $("selectedBenefitsModifyId").value = selectedBenefitsIdValue;
        $("selectedDiscountsModifyId").value = selectedDiscountsIdValue;
        $("debtTypeSelectedModifyId").value = debtTypeSelectedValue;
        
        var form = $("modifyDebtFormId");
        form.submit();
    } 
    
    /* 
     * Procesa la respuesta del autocomplete
     * Se deja en hiddenAutoCompleteId (un hidden) el "id;razon social"
     * entonces se parsea y se saca el id y se deja en "customerId" y en 
     * "corporateNameId" se deja la "razon social"
     */
    var postAutoCompleteCorporateName = function() {
        var hiddenAutoCompleteCustomerValue = $("hiddenAutoCompleteCustomerId").value;
    
        if (!Util.valid.isBlank(hiddenAutoCompleteCustomerValue)) {
            // Algo se trajo entonces se parsea
            var splitted = hiddenAutoCompleteCustomerValue.split(';'); 
            
            var id = splitted[0];
            var corporateName = splitted[1];
            
            $("customerId").value = id;
            $("corporateNameId").value = corporateName;  
            $("hiddenAutoCompleteCustomerCorpNameId").value = corporateName;
            
            // Limpio lo que estaba antes....
            $("hiddenAutoCompleteCustomerId").value = "";
        }
    }
    
</script>

<%-- El ID del form NO debe ser modificado. Se usa desde el menu --%>
<html:form action="/protected/showDebt" styleId="debtFormId">
    <%-- Lo dejo asi xq se pierde sino.... --%>
    <input type="hidden" name="id" value="${debtForm.id}" />
    
    <%-- Usado para dejar guardado los beneficios y descuentos seleccionados separados por ';' --%>
    <html:hidden property="selectedBenefits" styleId="selectedBenefitsId" />
    <html:hidden property="selectedDiscounts" styleId="selectedDiscountsId" />

    <h2>Modificaci&oacute;n de Deuda</h2>
    
    <div class="debtEdit">
        <table class="tableDataDebt" cellspacing="0">
            <tr>
                <td class="tableDataTitle">
                    Saldo
                </td>
                <td class="tableDataValue">
                    <html:text property="balance" styleId="balanceId" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Vigencia Desde
                </td>
                <td class="tableDataValue">
                    <html:text property="validityFrom" styleId="validityFromId" readonly="true"/>
                    &nbsp;
                    <img id="validityFromImgId" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/date.png"/>" title="Seleccione una fecha"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Vencimiento
                </td>
                <td class="tableDataValue">
                    <html:text property="expiry" styleId="expiryId" readonly="true"/>
                    &nbsp;
                    <img id="expiryImgId" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/date.png"/>" title="Seleccione una fecha"/>
                </td>            
            </tr>
            
            <tr>
                <td class="tableDataTitle">
                    Participante
                </td>
                <td class="tableDataValue">
                    <html:text property="studentSurname" styleId="studentSurnameId" styleClass="form-autocomplete" size="30" title="Ingrese el apellido y espere a que se carguen los resultados..." />
                    <%--    En studentId esta el ID cuando se autocompleta luego del post-function. 
                            En hiddenAutoCompleteId esta lo q vino del autocomplete como auxiliar --%>
                    <html:hidden property="studentId" styleId="studentId"/>
                    <input type="hidden" name="hiddenAutoComplete" id="hiddenAutoCompleteId" />
                    <input type="hidden" name="hiddenAutoCompleteSurname" id="hiddenAutoCompleteSurnameId" />
                </td>   
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Cliente
                </td>
                <td class="tableDataValue">
                    <html:text property="corporateName" styleId="corporateNameId" styleClass="form-autocomplete" size="40" title="Ingrese la razon social del cliente y espere a que se carguen los resultados ..." />
                    <%--    En customerId esta el ID cuando se autocompleta luego del post-function. 
                            En hiddenAutoCompleteCustomerId esta lo q vino del autocomplete como auxiliar --%>
                    <html:hidden property="customerId" styleId="customerId"/>
                    <input type="hidden" name="hiddenAutoCompleteCustomer" id="hiddenAutoCompleteCustomerId" />
                    <input type="hidden" name="hiddenAutoCompleteCustomerCorpName" id="hiddenAutoCompleteCustomerCorpNameId" />
                </td>   
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Curso
                </td>
                <td class="tableDataValue">
                    <html:select property="courseSelected" styleClass="allSelects" styleId="courseSelectedId" title="Cursos ..." >
                        <html:optionsCollection property="courseOptions"/>
                    </html:select>
                </td>            
            </tr>
            
            
            <tr>
                <td class="tableDataTitle">
                    Benef/Desc
                </td>
                <td class="tableDataValue">
                    <input type="button" value="Seleccionar" name="beneficiosDescuentos" onclick="showBenefitsAndDiscounts()" id="show-dialog-btn" title="Muestra una pantalla para elegir los beneficios y descuentos ..." />
                </td>
            </tr>            

            <tr>
                <td class="tableDataTitle">
                    Descuentos
                </td>
                <td class="tableDataValue">
                    <html:text property="discountValues" styleId="discountValuesId" readonly="true" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Descuentos (%)
                </td>
                <td class="tableDataValue">
                    <html:text property="discountPerc" styleId="discountPercId" readonly="true" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Beneficios
                </td>
                <td class="tableDataValue">
                    <html:text property="benefitValues" styleId="benefitValuesId" readonly="true" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Beneficios (%)
                </td>
                <td class="tableDataValue">
                    <html:text property="benefitPerc" styleId="benefitPercId" readonly="true" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Cantidad a crear
                </td>
                <td class="tableDataValue">
                    <html:text property="amountToCreate" styleId="amountToCreateId" title="Se crearan esta cantidad de deudas ... Todas iguales teniendo en cuenta las vigencias de los descuentos y beneficios" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Tipo de deuda
                </td>
                <td class="tableDataValue">
                    <html:select property="debtTypeSelected" styleClass="allSelects" styleId="debtTypeSelectedId" >
                        <html:optionsCollection property="debtTypeOptions"/>
                    </html:select>
                </td>            
            </tr>


        </table>

        <script type="text/javascript">
            Calendar.setup({
              inputField    : "validityFromId",
              button        : "validityFromImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });

            Calendar.setup({
              inputField    : "expiryId",
              button        : "expiryImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });
          </script>        
    
        <div id="clear">
        </div>
        <div id="clear">
        </div>
        
        <%-- Solo los admin y de secretaria pueden modificar. Es seguridad --%>
        <security:securizedContent roles="administrador,secretaria">
	        <div class="panelButton">
	        	<input type="button" value="Modificar" onclick="modifyDebt();" title="Modifica la deuda..." class="button">
	        </div>  
        </security:securizedContent>
    
    </div>

    <%-- Indicador de llamada de AJAX para el autocomplete --%>
    <span id="indicatorRegion" style="display: none; margin-left: 50%;">
        <img id="pepepepep" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/ajax-loader.gif"/>" />
    </span>

    <%-- Ventana flotante para beneficios y Descuentos --%>
    <!-- The dialog is created from existing markup.
         The inline styles just hide it until it created and should be in a stylesheet -->
    <div id="benefit-dlg" style="visibility:hidden;position:absolute;top:0px;">
        <div class="x-dlg-hd">
            Beneficios y Descuentos
        </div>
        <div class="x-dlg-bd">
            <!-- Tab de Beneficios -->
            <div class="x-dlg-tab" title="Seleccione beneficios">
                <!-- Nested "inner-tab" to safely add padding -->
                <div class="inner-tab">
                    <div style="width: 450px;">
                        <div class="panelBody">
                            <h3 class="panelTitle">Actuales</h3>
                            <ul style="position: relative; font-weight: bold;" class="sortableList boxy_fw scrollable" id="actualBenefits">
                            </ul>
                        </div>        
                
                        <div class="panelBody">
                            <h3 class="panelTitle">Disponibles</h3>
                            <ul style="position: relative;" class="sortableList boxy_fw scrollable" id="availableBenefits">
                            </ul>
                        </div>        
                    </div>

                    <div id="clear">
                    </div>
                </div>
            </div>
            <!-- Tab de Descuentos -->
            <div class="x-dlg-tab" title="Seleccione descuentos">
                <!-- Nested "inner-tab" to safely add padding -->
                <div class="inner-tab">
                
                    <div class="panelBody">
                        <h3 class="panelTitle">Actuales</h3>
                        <ul style="position: relative; font-weight: bold;" class="sortableList boxy_fw scrollable" id="actualDiscounts">
                        </ul>
                    </div>        
            
                    <div class="panelBody">
                        <h3 class="panelTitle">Disponibles</h3>
                        <ul style="position: relative;" class="sortableList boxy_fw scrollable" id="availableDiscounts">
                        </ul>
                    </div>        

                    <div id="clear">
                    </div>
                </div>
            </div>
        </div>
    </div>

</html:form>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteStudents.do"
  source="studentSurnameId"
  target="hiddenAutoCompleteId"
  parameters="studentSurname={studentSurnameId},filterStudents=true"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoComplete"
/>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteCustomers.do"
  source="corporateNameId"
  target="hiddenAutoCompleteCustomerId"
  parameters="corporateName={corporateNameId}"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoCompleteCorporateName"
/>

<%-- Inyectados por Javascript --%>
<div id="modifyDivId" class="hideClass">
    <html:form action="/protected/modifyDebt" styleId="modifyDebtFormId">
        <html:hidden property="balance" value="" styleId="balanceModifyId" />
        <html:hidden property="validityFrom" value="" styleId="validityFromModifyId" />
        <html:hidden property="expiry" value="" styleId="expiryModifyId" />
        <html:hidden property="studentId" value="" styleId="studentIdModifyId" />
        <html:hidden property="customerId" value="" styleId="customerIdModifyId" />
        <html:hidden property="courseSelected" value="" styleId="courseSelectedModifyId" />
        <html:hidden property="selectedBenefits" value="" styleId="selectedBenefitsModifyId" />
        <html:hidden property="selectedDiscounts" value="" styleId="selectedDiscountsModifyId" />
        <html:hidden property="amountToCreate" value="" styleId="amountToCreateModifyId" />
        <html:hidden property="debtTypeSelected" value="" styleId="debtTypeSelectedModifyId" />
    </html:form>
</div>   